<template>
	<el-card>
		<h2>{{ title }}</h2>
		<div :id="id" style="width: 100%; height: 40vh"></div>
	</el-card>
</template>

<style scoped></style>

<script setup lang="ts" name="barIndex">
import * as echarts from 'echarts'
import { ref } from 'vue'

const props = defineProps(['data', 'id', 'type'])
const data = props.data
const title = ref(data.title)

let color_map = new Map()
color_map.set(0, ['#FFB100', '#BF9430', '#A67300', '#FFC540', '#FFD473'])
color_map.set(1, ['#FF4F00', '#BF5D30', '#A63400', '#FF7B40', '#FF9E73'])
color_map.set(2, ['#FF9500', '#BF8430', '#A66100', '#FFB040', '#FFC573'])
color_map.set(2, ['#E7003E', '#AD2B4E', '#960028', '#F33D6E', '#F36D91'])
color_map.set(2, ['#B1009B', '#852178', '#730065', '#D836C4', '#D861C9'])

const fn = (str: string) => {
	let count = 0
	for (let i = 0; i < str.length; i++) {
		count += str.charCodeAt(i)
	}
	let key = count % 5
	console.info(key, count, str)
	return key
}

const buildBar = () => {
	return {
		color: '#ff6633',
		title: {
			left: '32px',
			text: '',
			subtext: data.subtext,
			subtextStyle: {
				height: 20
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: data.xData
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: data.data,
				type: 'bar',
				barWidth: '25%',
				itemStyle: {
					borderRadius: [4, 4, 0, 0]
				},
				label: {
					show: true,
					position: 'top',
					textStyle: {
						color: '#00000066'
					}
				}
			}
		]
	}
}

const buildPie = () => {
	return {
		color: color_map.get(fn(props.id)),
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '90%',
			left: 'center'
		},
		series: [
			{
				name: '',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					normal: {
						show: true,
						position: 'center',
						textStyle: {
							fontSize: 16,
							padding: [-100, 0, 0, 0]
						},
						formatter: (params: any) => {
							console.info('params', params)
							return title.value + '\n1000'
						}
					},
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						// show: true,
						// formatter: ['{b}', '({c})'].join('\n'),
						// fontSize: '14',
						// padding: [20, 0, 0, 0],
						// fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: data.data
			}
		]
	}
}

setTimeout(function () {
	const chart = echarts.init(document.getElementById(props.id))

	switch (props.type) {
		case 'pie':
			chart.setOption(buildPie())
			break
		default:
			chart.setOption(buildBar())
			break
	}
}, 500)
</script>
